<template>
  <div class="address-admin">
    <div class="address-admin-add" @click="goTo('/center/createAddress')">
      <i class="iconfont makerxinzeng"></i>
    </div>
    <div class="card-content">
      <div class="card-content-box">
        <nut-infiniteloading
          @loadmore="onInfinite"
          :use-window="false"
          :is-show-mod="true"
          :has-more="isHasMore"
          :is-loading="isLoading"
          :threshold="200"
        >
          <ul class="list">
            <li class="list-item" v-for="(item, index) of data" :key="index">
              <nut-leftslip ref="demo1">
                <div slot="slip-main" class="slip-main">
                  <div>
                    <div class="user-info">
                      <span>艺林</span>
                      <span>13445679023</span>
                    </div>
                    <div class="user-addr">
                      <span class="default-addr">默认</span>
                      <span>江苏省 南京市 建邺区 信安大厦B座910</span>
                    </div>
                  </div>
                  <div>
                    <i class="iconfont makerbianji" @click="goTo('/center/editAddress')"></i>
                  </div>
                </div>
                <div slot="slipbtns" class="slipbtns slip-btns">
                  <a href="javascript:;" class>
                    <i class="iconfont makershanchu"></i>
                  </a>
                </div>
              </nut-leftslip>
            </li>
          </ul>
        </nut-infiniteloading>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddressAdmin',
  data() {
    return {
      imgUrl: require('../../assets/image/icon094.png'),
      data: new Array(30),
      page: 2,
      num: 30,
      isHasMore: true,
      isLoading: false,
      isErr: false,
      timer: null,
    };
  },
  methods: {
    // 无线加载
    onInfinite() {
      this.isLoading = true;
      this.timer = setTimeout(() => {
        if (this.page <= 5) {
          this.data = new Array(this.num * this.page);
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 100);
    },
    // 跳转
    goTo(path) {
      this.$router.push(path);
    },
  },
  destroyed() {
    clearTimeout(this.timer);
  },
};
</script>
<style>
.nut-leftslip .slipbtns a {
  background-color: transparent;
  color: #ff4949;
}
.nut-leftslip .slip-main {
  padding: 15px;
}
</style>
<style scoped lang="scss">
.address-admin {
  width: 100vw;
  height: 94vh;
  overflow: hidden;
  .address-admin-add {
    width: 94vw;
    margin: 2vh 3vw 0;
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    background-color: #ff7e00;
    border-radius: 10px;
    color: #ffffff;
    & > i {
      font-size: 28px;
    }
  }
  .card-content {
    width: 94vw;
    margin: 20px 3vw 0;
    height: 88vh;
    overflow: hidden;
    .card-content-box {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .list {
      width: 100%;
      height: 100%;

      .list-item {
        margin-bottom: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        .slip-main {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .user-info {
            color: #1e1e1e;
            font-size: 16px;
            & > span:first-child {
              margin-right: 20px;
            }
          }
          .user-addr {
            margin-top: 12px;
            font-size: 12px;
            color: #b3b3b3;
            .default-addr {
              display: inline-block;
              width: 40px;
              height: 18px;
              border-radius: 10px;
              background-color: #ffeede;
              color: #ff7e00;
              font-size: 10px;
              text-align: center;
              line-height: 18px;
              font-weight: bolder;
              margin-right: 10px;
            }
          }
          .iconfont {
            font-size: 16px;
            color: #ff7e00;
          }
        }
        .slip-btns > a {
          font-size: 18px;
          color: red;
        }
      }
    }
  }
}
</style>
